使用psedo元素和绝对定位不创建行

时间:2015-05-28 20:02:31

标签: html css

我正在尝试使用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;
}

为什么线条没有出现在图像的左侧?

FIDDLE HERE

3 个答案:

答案 0 :(得分:3)

  

为什么线条没有出现在图像的左侧?

由于图片代码没有内容,因此:after:before伪元素的行为与预期不符。

您可以做的最好的事情是将图像包装到帮助器inline-block容器中:

(但是,我不确定你的情况应该是:before的形状)

&#13;
&#13;
.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;
&#13;
&#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> 因此,从逻辑上讲,它是不可能的。