Styling часть псевдоэлемента

Question

Есть ли способ, которым я могу настроить стили CSS только на части содержимого: before и: after pseudo-elements?

Answer 1

Если содержание :before псевдо-элемент отображается рядный наряду с содержанием генерирующего элемента, вы можете по-прежнему нацелены :first-line или :first-letter отдельно, и он должен переопределить :before для первой строки или буквы генерируемого содержимого, соответственно:

div { 
    width: 100px; 
} 

div:before { 
    content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'; 
} 

div:first-line { font-weight: bold; } 
div:first-letter { color: red; } 

Кроме того, вы не можете надежно предназначаться части :before или :after Псевдоэлементы с CSS, поскольку псевдоэлементы не могут генерировать другие псевдоэлементы в CSS2.1, могут существовать только реальные элементы. Если вам нужно создать первую букву добавленного содержимого, используйте JavaScript для добавления этого контента в первую очередь.

Answer 2

Я не понимаю, когда вы говорите только часть псевдоэлемента. Для целевой стили для :after и :before рассматривая их в качестве элементов блока, то основное, что вам нужно иметь:

.element:after, .element:before { 
    content: " "; 
    display: block; 
    width: 100px; 
    height: 100px; 
}