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

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    .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;

    <div class="anything">What is mean <b>after css</b></div>
    <div class="anythingBefore">What is mean <b>before css</b></div>
    <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>

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.