[英]in CSS, I can't figure out how to add “content” to “first-line” or “first-letter”
ul.myList {
list-style-type: none;
padding: 0;
margin: 10px 0;
&:first-line {
color: $blue;
text-align: left;
font-size: 100%
}
I used "first-line" to make the color of the first line blue. 我使用“第一行”将第一行的颜色设置为蓝色。 What I want to do is to add content.
我想做的就是添加内容。 I tried this by using
我尝试通过使用
content: "+";
I also tried using a li
before, and by using first-letter
. 我也尝试过使用
li
和first-letter
。 However using first-letter
, replicates the "+" to all the elements of the list. 但是,使用
first-letter
会将“ +”复制到列表的所有元素。 So my interface would look like this: 所以我的界面看起来像这样:
+ parent
+ child
+ child
I simply want this: 我只是想要这个:
+ parent (blue color)
child
child
child
Can someone help me ? 有人能帮我吗 ?
You can't use the content
property with just anything (go here ), you have to use it with either the ::before
or the ::after
pseudo-element; 您不能仅将
content
属性与任何content
一起使用(转到此处 ),而必须将其与::before
或::after
伪元素一起使用; in your case, ::before
(Obviously, because you want to insert the "+" before the text, not after it). 在您的情况下为
::before
(显然是因为您想在文本之前而不是在文本后面插入“ +”)。
Here is how you do it: 这是您的操作方式:
p::first-line { color: blue; text-align: left; font-size: 100% } p::before { content: "+"; }
<p> My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. </p> <br> <p> The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.