CSS 伪元素不工作

Question

我正在尝试在 div 中的图像下方创建渐变 border。

我 100% 确定我的 CSS 代码本身完全没问题，因为我之前已经在其他元素上测试过它。

问题是它以某种方式拒绝 select 正确的元素并将伪元素放在它下面。

#profilePicture {
  width: 200px;
  margin-left: 25px;
  border-top: 1px solid #070707;
  border-left: 1px solid #070707;
  border-right: 1px solid #070707;
}
#pf {
  display: block;
  width: 200px;
}
#pf:first-child:after {
  content: '';
  position: absolute;
  width: 200px;
  height: 1px;
  background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707);
  background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707);
  background: -o-linear-gradient(left, #070707, #a1a1a1, #070707);
  background: linear-gradient(to right, #070707, #a1a1a1, #070707);
  top: -1px;
  left: 0;
}

<div id="profilePicture">
  <img id="pf" src="layout/images/profile/pf.png">
</div>

据我所知，它应该 select #pf 这是其父项的第一个子项（正确）并在其后添加伪元素？

编辑： 我确实尝试了 top: 1px 和更大的 heights 来确定。这没有效果。

Answer 1

您不能将伪元素（:before 和 :after）与 img 标签一起使用，在 img 周围创建额外的 div 或添加 :after 改为 #profilePicture 元素。

也没有理由在 #pf:first-child:after 选择器中使用 first-child，因为页面上只能有一个具有 pf id 的元素。

编辑：

将 position: relative 添加到您的 #profilePicture
从 :after

top: 1px;

将 bottom: 0; 添加到 :after

Answer 2

您不能在 img 标签中使用伪元素（::before 和 ::after）（至少现在是这样）。

看看W3C specs怎么说：

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

因此您必须将伪元素应用于父元素。

您还需要在父元素中使用 position:relative，因为您在伪元素中应用 position:absolute。这样一来，您将使用 DOM.

将伪元素保持在流程中

请注意，您的 CSS

中有一些变化

body {
  margin: 0
}
#profilePicture {
  width: 200px;
  margin-left: 25px;
  position: relative;
  border: solid #070707;
  border-width: 1px 1px 0 1px
}
#pf {
  display: block;
}
#profilePicture::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 5px;
  background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707);
  background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707);
  background: -o-linear-gradient(left, #070707, #a1a1a1, #070707);
  background: linear-gradient(to right, #070707, #a1a1a1, #070707);
  bottom: 0;
  left: 0;
}

<div id="profilePicture">
  <img id="pf" src="//dummyimage.com/200x200&text=image">
</div>

Answer 3

只需为此选择器 #profilePicture 添加 position:relative，并将 #profilePicture::after 更改为：

#profilePicture::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 1px;
    background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707);
    background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707);
    background: -o-linear-gradient(left, #070707, #a1a1a1, #070707);
    background: linear-gradient(to right, #070707, #a1a1a1, #070707);
    bottom: 1px;
    left: 0;
}

CSS 伪元素不工作

CSS pseudo element not working

html

css

pseudo-element

linear-gradients