Setting up the border with :: before-CodePudding

I saw some time ago how to set up a border around a block using :: before. Please help me set up a similar frame as in the example picture Border example

Border example

CodePudding user response：

Actually, you don't need to use ::before. You can just use the border property. It works like this:

You can change the style of the border with this property: border-style:

You can change the width with this property: border-width:

You can change the width with this property: border-color:

To make the border in the example, use the following code:

CSS:

#example-element {
  padding: 40px;
  border-width: 5px;
  border-style: solid;
  border-color: green;
}

HTML Body:

<p id = "example-element">Lalala<br>Booom!!<br>I love to code!
Hello world! HTML and CSS are the best!</p>

Hope this helps :D

CodePudding user response：

These properties are most useful given the circumstance. I would set border on el and background-image on :before.

el,el:before{
 // subtractive size
 box-sizing:border-box;
}

el{
 // contain child
 position:relative;
}

el:before{
 // fill space
 position:absolute;
 display:block;
 top:0;left:0;width:100%;height:100%;
 // ignore clicks
 pointer-events:none
 // styles
 z-index:2;
 border:0.05em solid red;
 box-shadow: inset 0 0 .05em red;
 }