Override css from Pseudo class

Question

Я не дизайнер, так что это может звучать глупо.

Я могу переопределить color свойство от псевдо класса, но не заполнение.

Ниже приведен пример

HTML:

<p id="pid" class="pclass"></p> 

CSS:

.pclass 
{ 
    color:red; 
    padding-left: 20px; 
} 

#pid:before 
{ 
    content:'test '; 
    color:green !important; 
    padding-left: 0px !important; 
} 

Fiddle

Answer 1

Причина

стили примененных от псевдо-класса применяются только к content. Не к фактическому элементу. Вы можете подумать, что !important изменяет цвет, но это не тот случай.

Итак, когда вы меняете color из псевдокласса, изменяется цвет содержимого, то есть test. И padding-left применяется к test только не к элементу <p>.

Demo

Осмотрите пункт и обратите внимание на отступы.

.pclass { 
 
    color: red; 
 
    padding-left: 20px; 
 
} 
 
.pclass:before { 
 
    content: 'test'; 
 
    color: green; 
 
    padding-left: 10px; 
 
}

<p id="pid" class="pclass"></p>

Решение

Чтобы решить эту проблему, вы можете установить position элемента в relative и использовать отрицательную left.

Demo

.pclass { 
 
    color: red; 
 
    padding-left: 20px; 
 
} 
 
.pclass:before { 
 
    content: 'test'; 
 
    color: green; 
 
    left: -20px; 
 
    position: relative; 
 
}

<p id="pid" class="pclass"></p>

Answer 2

использовать это может помочь вам

#pid::before { 
    left: -20px; 
    position: relative; 
} 

Answer 3

Вы можете просто переопределить отступы с помощью селектора #pid: идентификаторы имеют более высокий приоритет, чем классам:

.pclass { 
    color:red; 
    padding-left: 20px; 
} 
#pid:before { 
    content: 'test'; 
    color: green; 
} 
#pid { 
    padding-left: 0; 
} 

Если вы хотите сохранить поле после добавления текста :before вы можете добавить

padding-right: 20px; 

до #pid:before.