In my HTML structure, I have a div with the class "box" and I have utilized pseudo-classes :after to create a blue border around the box and :before to overlay an orange-colored box as shown in the image. I've achieved everything in the image - the box, the icon, and the text - except for the silver color effect on the text and the icon.
Expected Outcome
https://i.sstatic.net/ISgTU.jpg
Result Obtained
https://i.sstatic.net/HDpGz.jpg
HTML Structure
enter code here
<section class="section why-us">
<div class="container">
<div class="box left bordered-box selected">
<img src="images/why-us-icon8.png" class="section-img">
<h2>Online Research</h2>
</div>
</div>
</section>
CSS Styling
.why-us .box{
background:#F1F1F1;
margin-bottom:30px;
height:250px;
}
.bordered-box h2{
color:#2c3e50;
}
.bordered-box:before{
content:'';
position:absolute;
top:10px;
left:10px;
width:90%;
height:90%;
border:2px solid #B2E9F1;
z-index:1;
}
.selected:after{
content:'';
position:absolute;
top:107px;
width:260px;
height:142px;
background:#E67E22;
background:rgba(255,140,0,0.4);
opacity:0.9;
}