Question

所以基本上，我希望我的“li”事情看起来像带箭头的小聊天框。每隔一行都会有一个箭头朝向相反的方向和侧面，如下所示：

http://i.gyazo.com/e088cd3590de93481c0b76ff912f2afe.png

我已经尝试了一切，但我真的无法让它发挥作用。请注意，我确实需要将“：before”和“：after”定位为“relative”，因为我不能让它们仅仅粘贴在页面上的一个位置。

.line li{
list-style:none;
background: #F4F4F4;
border:1px solid #EDEDED;
padding:10px;
border-radius:3px;
color:#A0A0A0;
width:160px;
}


.line .odd {
margin-left:15px;
}

.line .even {
margin-left:35px;
}

.line .odd::before{
position:relative;
content:('◥');
color:#F4F4F4;
z-index:999;
}

.line .odd::after{
position:relative;
content:('◤');
color:#F4F4F4;
z-index:999;
}

Answer 1

伪元素content值无效。 content property的有效值为：

normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

在您的情况下，值应为字符串。

而不是content: ('◥')，应该是content: '◥'或content: '(◥)'

.line .odd::before{
    position: relative;
    content: '◥';
    color: #F4F4F4;
    z-index: 999;
}

.line .odd::after{
    position: relative;
    content: '◤';
    color: #F4F4F4;
    z-index: 999;
}

我想在符号前插入一个：＃34; li＆＃34;标签？

1 个答案: