Sorin D. Sorin D. - 3 months ago 10
CSS Question

CSS :after used to show a image like not available

I have this image icon and this is how I thought that I can put those two red and white lines to cut the camera icon. The problem is that I can't see any line in output.
Where is the problem?



.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

You should add position: relative to the parent and position: absolute to the pseudo element.

.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>

Comments