Question

我想知道是否可以为li:before伪元素添加换行符，以便三个单词可以一个显示在另一个上例如：

li:before{
content:'hello <br> how<br> are<br>';
}

这是我的真实代码。它是一个圆圈，里面有一些文字

#test li:before{
    content:'';
    display:block;
    width:5.0rem;
    height:5.0rem;
    background-color:rgb(255,104,0);
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
 #landing-page-nav li:after{
        content:"Specials"; 
    /*here i want to add 1 over over the other like this:
    Special
    Offer
    for*/

}

我现在不行，但仅用于解释

感谢您的帮助

Answer 1

使用 \ A

替换<br> 至 \A

<强>的CSS

li:before{
content:'hello \A how \A are \A';
white-space: pre;
}

代码段示例

＆＃13;

li:before{
content:'hello \A how \A are \A';
white-space: pre;
}

＆＃13;

<ul>
<li></li>
</ul>

＆＃13;

圈内文字

＆＃13;

ul
{
  list-style-type:none;
}
li:before{
content:'hello \A how \A are \A';
white-space: pre;
}

#test li:before{
    content:'hello \A how \A are \A';
    display:block;
    width:5.0rem;
    height:5.0rem;
    background-color:rgb(255,104,0);
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    text-align: center;
}
 #landing-page-nav li:after{
        content:"Specials \A Offer \A for"; 
        white-space: pre;
    /*here i want to add 1 over over the other like this:
    Special
    Offer
    for*/

}

＆＃13;

<ul id="test">
<li></li>
</ul>
<br>
 <ul id="landing-page-nav">
<li></li>
</ul>

＆＃13;

在li：在伪元素之前添加换行符

1 个答案: