css Question posted in
Some basic documentation can be found here.

Css – in pseudo element .box::before why does 'Hello World' get printed inside the box rather than before the box?

Can someone explain me conceptually, .box::before why does ‘Hello World’ get printed inside the box rather than before the box?

.box {
    display:flex;
    width:200px;
    height:200px;
    font-size: 2em;
    border:5px solid red;
}
.box::before {
content: 'Hello World';
width: 0px;
}
<a class="box"></a>
Tags:

2

Answers


  1. 0 
    .box {
    display:block;
    width:200px;
    height:200px;
    font-size: 2em;
    border:5px solid red;
    box-sizing:border-box;
}
.box::before {
content: 'Hello World';
width: 0px;
}
    <a class="box"></a>
    Login or Signup to reply.
  2. 0

    Word breaks after width: 0px because there is no space for both the words. When you remove width: 0px, it becomes default width which is width: auto.

    And default value for white-space is normal, If you don’t want word to break you can use white-space: nowrap.

    Read more about white space on MDN.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search