JSFiddle - React, Tailwind, and code Playground

HTML

<p>Hola, before y after con contenido en rojo</p>

<div></div>

CSS

p:before {
    content: "Before ";
}
p:after {
    content: " After";
}
p:before, p:after {
    color: red;
}

div {
    background: red;
    height: 50px; 
    position: relative;
    width: 150px;
}
div:before {
    background: green;
    content: "";
    height: 50px; 
    left: 0px;
    position: absolute;
    width: 50px;
}
div:after {
    background: blue;
    content: "";
    height: 50px;
    position: absolute;
    right: 0px;
    width: 50px;
}