Question:
I have div boxes lined side by side with arrows pointing. I want to write content above the arrow using html css. How can I do that?
My HTML code:
<div id="border"></div><span >→</span>
<div id="borders"></div>
<span >→</span>
<div id="borderss"></div>
<span >→</span>
<div id="bordersss">
</div>
My CSS code:
#border {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borders {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borderss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#bordersss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
.arrow {
font-size: 105px;
color: red;
width:115%
}
Codepen link: https://codepen.io/acqafqe/pen/yLEJgVv
CodePudding user response:
You can use flexbox and play with them.
<div id='wrapper'>
<div >
<span>title1</span>
<span >→</span>
</div>
<div id="borders"></div>
<div >
<span>title2</span>
<span >→</span>
</div>
<div id="borderss"></div>
<div >
<span>title3</span>
<span >→</span>
</div>
<div id="bordersss">
</div>
</div>
#border {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borders {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borderss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#bordersss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
.arrow {
font-size: 105px;
color: red;
width:115%
}
.arrowTitle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#wrapper{
display: flex;
align-items: center;
}
If you're not familiar with flexbox you can check here
CodePudding user response:
I did it adding flex-layout and some additional styles
Presentation
HTML
<div id="main-content">
<div id="border"></div>
<div >
<span>text</span>
<span >→</span>
</div>
<div id="borders"></div>
<div >
<span>text</span>
<span >→</span>
</div>
<div id="borderss"></div>
<div >
<span>text</span>
<span >→</span>
</div>
<div id="bordersss">
</div>
</div>
CSS
#main-content {
display: flex;
flex-direction: row;
align-items: center;
}
#border {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borders {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borderss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#bordersss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
.arrow {
font-size: 105px;
color: red;
width:100px;
margin-top: -60px;
}
.arrow-flex {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50px;
}
CodePudding user response:
You can set a :before
attribute to .arrow
selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
#border {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borders {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#borderss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
#bordersss {
height: 80px;
width: 10%;
border: 1px black solid;
display: inline-block;
}
.arrow {
font-size: 105px;
color: red;
width:115%;
position: relative;
}
.arrow:before {
content: 'test';
font-size: 14px;
position: absolute;
top: 20%;
}
<div id="border"></div><span >→</span>
<div id="borders"></div>
<span >→</span>
<div id="borderss"></div>
<span >→</span>
<div id="bordersss">
</div>