Four-Sided Positioning In CSS

by tbassetto

HTML

<div>Hello</div>

CSS

div {
    position: relative;
    background-color: gray;
    border: 1px solid black;
    margin: 50px;
    text-align: center;
    padding: 30px;
    color: white;
}

div::before {
    display: block;
    content: " ";
    position: absolute;
    /*top: 0; left: 0; width: 100%; height: 100%;*/
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
}