CSS :after 用于显示不可用的图像

Question

我有这张图片，我就是这么想的，我可以用那两条红白线来切割相机图标。问题是我在输出中看不到任何行。问题出在哪里？

.fa:after {
  content: '';
  width: 10px;
  height: 2px;
  background-color: red;
  transform: rotate(45deg);
  box-shadow: 0 0 2px white;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<p><i class="fa fa-camera" aria-hidden="true"></i> Camera for not available</p>

Answer 1

您可以在 .fa-camera（父级）中使用 position:relative/absolute、relative，在 ::after

中使用 absolute

.fa-camera {
  position: relative
}
.fa-camera::after {
  content: '';
  width: 17px;
  height: 2px;
  background-color: red;
  transform: rotate(45deg);
  box-shadow: 0 0 2px white;
  position: absolute;
  top: 7px;
  left: 0
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<p><i class="fa fa-camera" aria-hidden="true"></i> Camera for not available</p>

Answer 2

您应该将 position: relative 添加到父元素，将 position: absolute 添加到伪元素。

.fa {
  position: relative;
}
.fa:after {
  content: '';
  left: 0px;
  top: 45%;
  width: 20px;
  height: 1px;
  background-color: red;
  transform: rotate(45deg);
  border-bottom: 1px solid white;
  position: absolute;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body>
  <p><i class="fa fa-camera" aria-hidden="true"></i> Camera for not available</p>
</body>

</html>

Answer 3

正如其他人所说，您没有 display 或 position 行。到目前为止，其他解决方案还没有让白线起作用——你可以用 border:

可靠地做到这一点

.fa {
    position: relative;
}
.fa:after {
    content: '';
    width: 20px; /* made this a little bigger */
    height: 2px;
    background-color: red;
    transform: rotate(45deg);
    border-bottom: 2px solid #fff; /* border instead of box-shadow */
  
    /* added these */
    position: absolute;
    left: -1px; /* you'll prob need to tweak this */
    top: 6px; /* you'll prob need to tweak this */
    opacity: .8; /* can't quite tell, but it looks like you wanted it to be slightly transparent? */
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i class="fa fa-camera" aria-hidden="true"></i>

浏览器内的检查器是了解这种情况下发生的事情的好方法。这是您的版本在 Chrome 检查器中的样子。 .fa:after没有宽度！

这里是当您添加 position: absolute 时：它采用您想要的尺寸

然后只需添加位置值（例如 left 和 top）即可将其放置在您想要的位置

CSS :after 用于显示不可用的图像

CSS :after used to show a image like not available

html

css

pseudo-element

font-awesome