Question

我尝试了各种方法在每个p之前勾选但是它不起作用。

只有第一个字母才有效。

有什么想法吗？

.text_intro {
    margin: 0 auto;
    width: 720px;
    background: rgba(30,30,30,0.8);
    border-radius: 5px;
    border: 1px solid #444;
    text-align: left;
    color: #FFF;
    padding: 10px;
    margin-bottom: 20px
}

.text_intro p::first-letter {
    font-weight: bold;
    color: #2DB243;
    font-size: 20px;
    font-style: italic;
}

.text_intro p::first-letter::before {
    content: "✔";
    padding-right: 5px;
    color: yellow;
    font-size: 20px;
}

Answer 1

检查下面的代码段。

将.text_intro p::first-letter::before更改为.text_intro p::before，并为position: absolute;设置padding-left: 25px，以便p标记的内容自动换行（如果它到达下一个）线。

.text_intro p::first-letter {
    font-weight: bold;
    color: #2DB243;
    font-size: 20px;
    font-style: italic;
}

.text_intro p::before {
    content: "✔";
    padding-right: 5px;
    color: black;
    font-size: 20px;
    position:absolute;
    left:0px;
    top:2px;
}

.text_intro p{
    position:relative;
    padding-left:25px;
}

<div class="text_intro">
  <p>Curabitur vestibulum sem sed justo commodo, sit amet porttitor urna interdum.
</p>
<p>Vivamus euismod tellus et tortor mattis, id pharetra erat varius.
</p>
<p>Maecenas molestie lorem ac tellus pharetra, ac consectetur nisi tristique.
</p>
</div>

结合p :: first-letter和之前

1 个答案: