CSS arrow. Only a portion of the arrow is being displayed - html

Question

I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <h2>, complete arrow is not being displayed.
The source code is as follows
HTML
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
STYLE
<style>
.arrow-right::after{
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
</style>
The output is as follows
The arrow pointer is not being displayed completely. Am I using the elements wrongly? I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.
Edit:
Sorry for my bad drawing. This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.

Answer 1

Is this what you're looking for?
http://jsfiddle.net/61tc5em9/2/
HTML
<div id="container">
<div id="arrow">text text text</div>
<div id="content">text text text text</div>
</div>
CSS
#container {
height: 75px;
background-color: black;
position: relative;
white-space: nowrap;
}
#arrow {
width: 30%;
background-color: red;
text-align: center;
font-size: 1.5em;
line-height: 75px;
}
#arrow::after {
content: "";
border-top: 37px solid transparent;
border-bottom: 38px solid transparent;
border-left: 50px solid red;
position: absolute;
left: 30%;
}
#content {
color: yellow;
font-size: 1.5em;
position: absolute;
left: 50%;
top: 25px;
}
Hope this helps. Let me know if you need any changes.

Answer 2

You need font-size:0; for the arrow.
.arrow-right::after {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
font-size: 0;
position: relative;
top: -8px;
}
span{
display: inline-block;
}
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>

Answer 3

Recommendations for improving your code and make it more dynamic:
Use :after in the statement element itself (this way you will avoid
the extra code in html and you can position the arrow relative to the element).
Align it to the right using left: 100% (so it is always position to
the right regardless of the width of the arrow).
Use top: 50% and margin-top: -(height/2)px to center it vertically.
Just like this:
.wrapper {
padding: 2px 0;
background: yellow;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent; /*change the border width to set the desired hieght of the arrow*/
border-bottom: 15px solid transparent;
border-left: 15px solid green; /*change the border width to set the desired width of the arrow*/
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">This is what I want</span>
<span style="margin-left: 50px;">is this what you want?</span>
</h2>
</div>
Note that in this way you have a more semantic code because you don't have dummy element in your html and if you want more statement it will put the arrow behind automatically like this:
.wrapper {
padding: 2px 0;
background: yellow;
margin-bottom: 10px;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">One statement</span>
<span style="margin-left: 50px;">Good</span>
<span class="statement">Two statement</span>
<span style="margin-left: 50px;">Great</span>
</h2>
</div>
<div class="wrapper">
<h2>
<span class="statement">Where is the arrow?</span>
<span style="margin-left: 50px;">Do not worry about it</span>
</h2>
</div>