Making two squares with :before class [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to make two squares before my headings. I know how to make a single square with the before class, but I dont know how to make two that isn't the same width.
What I'm going for is something that looks like this:

Answer 1

You can achieve this by simply a :before as this fiddle does.
HTML
<h1>Reference</h1>
CSS
h1{
font-size: 24px;
color:blue;
}
h1:before{
content:"";
display:inline-block;
margin-right:10px;
height:30px;
width:5px;
border-left:solid 10px blue;
border-right:solid 5px blue;
vertical-align:top;
}

Answer 2

You'll need to also to create the after pseudo element. Let me know if the code below helps.
h1 {
position: relative;
color: #A0CD62;
line-height: 1;
font-weight: 300;
}
h1:before {
content: '';
display: inline-block;
width: 0.25em;
height: 1em;
margin-right: 0.25em;
border-left: 0.5em solid $color-pistashio;
border-right: 0.25em solid $color-pistashio;
}
<h1>Referencer</h1>

Answer 3

.square {background-color:green; width:100px; height:100px;}
.square:before {content:""; background-color:white; position:absolute; width:20px; height:100px; left:50px; }
<div class="square">
</div>
Just change the colour from green to brighter green :D.
Basically what i did there is. Created a big green div with green background. Then using ':before' added white content on the top of it which has the same height as the div.
This should work .
Please , let me know if that helps. :)

Answer 4

I don't think you can do this with only the :before sudo class. Here's a quick pen of it working with both :before and :after. You should be able to monkey about with it to suit your needs. http://codepen.io/sharperwebdev/pen/epgeNQ
.logo {
position: relative;
color: green;
padding: 20px;
left: 50px;
}
.logo:before {
content: "";
position: absolute;
left: -50px;
background-color: green;
width: 30px;
height: 30px;
}
.logo:after {
content: "";
position: absolute;
left: -10px;
background-color: green;
width: 20px;
height: 30px;
}
Why don't you just create an svg of the logo?