What is the CSS after and CSS before
CSS after is the HTML element but this is not
showing in HTML code. It’s showing only on the web browser after running
code. In visual this element data show. In code if we use a debugger or
inspect element then we can access code after then we can modify CSS according to requirement. After CSS work with content property doesn’t forget it this is mandatory for after and CSS before both CSS.
Code demo
Code demo
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.anything::after {
content: " -----------
after mean in css";
}
.anythingBefore::before {
content: "before mean in
css ----------- ";
}
.anythingImage::before {
content: url(images/anythinglearn.png);
}
.anythingBeforeImage::after {
content: '';
background: url(images/anythinglearn.png) no-repeat 0 0;
width: 294px;
height: 91px;
position: absolute;
}
</style>
</head>
<body>
<div class="anything">What is mean <b>after css</b></div>
<br>
<div class="anythingBefore">What is mean <b>before css</b></div>
<br>
<h4>How to call image with
before css?</h4>
<div class="anythingImage"> Image example first technique.</div>
<h4>How to call image with
after css?</h4>
<div class="anythingBeforeImage"> Image example second technique.</div>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.