我正在尝试使用psedo元素和绝对定位在此图像的左侧创建一条线。不知怎的,这条线没有出现,我用过的HTML和CSS很简单直截了当。
HTML:
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="" class="img-responsive">
CSS:
img {
position: relative;
width:400px;
}
img:before {
content: ' ';
position: absolute;
width: 10px;
height: 15px;
right: -15px;
color: #000;
background: #000;
z-index: 999;
}
为什么线条没有出现在图像的左侧?
答案 0 :(得分:3)
为什么线条没有出现在图像的左侧?
由于图片代码没有内容,因此:after
和:before
伪元素的行为与预期不符。
您可以做的最好的事情是将图像包装到帮助器inline-block
容器中:
(但是,我不确定你的情况应该是:before
的形状)
.wrapper img {
width: 400px;
}
.wrapper {
position: relative;
display: inline-block;
}
.wrapper:before {
content: '';
position: absolute;
width: 10px;
height: 15px;
right: -15px;
color: #000;
background: #000;
z-index: 999;
}
&#13;
<div class="wrapper">
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="" class="img-responsive" />
</div>
&#13;
答案 1 :(得分:1)
:之前没有为img工作。您必须将其添加到包装器div。看看http://jsfiddle.net/fq6q4n7L/3/
div {
position: relative;
width:400px;
display:inline-block;
}
img {
width:100%;
margin:0;
padding:0
}
div:before {
content:' ';
position: absolute;
width: 10px;
height: 15px;
right: -15px;
color: #000;
background: #000;
display:block;
z-index: 999;
}
答案 2 :(得分:0)
伪元素Hello
/1Goodbye
/1
就像一个标记,它位于引用结束的标记之前。图片标记是一个仅限开放的标记,因此它不能包含:after
。
例如,如果我们有:after
,之后的伪元素会是这样的:<p>Text</p>
因此,从逻辑上讲,它是不可能的。