Psuedo-element text requires vertical adjustment, What CSS is required? - html

Question

I have some code which is meant to render a curved boundary from a vertical to the bottom right as shown in the attached picture:
But as you can see, the text is not in the right spot... granted, it's 10 pixels from the main vertical right wall of the main part of the DIV, but the padding from the top is not 7px. I've tried rendering the "padding" using line-height, but what you see here is at line-height: 0... going any lower doesn't make it go any higher... Increasing it however, does push it further down.
Is there any I can render this code such that "ELBOW 1" appears 7px from the top of the DIV, and yet still retain the text content within the tag as a data attribute?
JSFiddle: https://jsfiddle.net/eliseo_d/b83d9ytL/3/
Code below:
HTML:
<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>
CSS:
html {
background-color: rgb(0,0,0);
font-family: Impact;
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102,102,102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0,0,0);
font-size: 14pt;
height: 67px;
margin-bottom: 4px;
margin-right: 21px;
text-transform: uppercase;
width: 104px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
div[class^='elbow-'][class*='-botrt-'] {
border-bottom-left-radius: 42px;
}
/* elbow bar */
div[class^='elbow-'][class*='-botrt-']:before {
content: '';
height: 30px;
left: 104px;
bottom: 0;
position: absolute;
margin-right: 4px;
}
div[class^='elbow-'][class*='-wide0-']:before {
width: 21px;
}
div[class^='elbow-'][class$='-grey1']:before {
background-color: rgb(102,102,102);
}
/* inside curve */
div[class^='elbow-'][class*='-botrt-']:after {
height: 21px;
width: 73px;
bottom: 30px;
left: 21px;
padding-right: 31px;
position: absolute;
content: attr(data-text);
text-indent:-59px;
color: rgb(0,0,0);
text-align: right;
}
div[class^='elbow-1-'][class*='-botrt-']:after {
line-height: 0;
}
div[class^='elbow-'][class*='-botrt-'][class$='-grey1']:after {
background: radial-gradient(circle at 100% 0%, rgba(102,102,102,0) 21px, rgba(102,102,102,1) 21px);
}
Update: For some reason the Impact font isn't rendering correctly in the Fiddle... This won't be an issue in my original local code, but the padding issue from above still stands...

Answer 1

Yep, here we go.
html {
background-color: rgb(0, 0, 0);
font-family: Impact;
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102, 102, 102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0, 0, 0);
font-size: 14pt;
height: 67px;
margin-bottom: 4px;
margin-right: 21px;
text-transform: uppercase;
width: 104px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
div[class^='elbow-'][class*='-botrt-'] {
border-bottom-left-radius: 42px;
}
/* elbow bar & inner curve */
div[class^='elbow-'][class*='-botrt-']:before {
content: '';
height: 52px;
width: 21px;
left: 100%;
bottom: 0;
position: absolute;
/* inside curve */
background: radial-gradient(circle at top right, transparent, transparent 21px, rgb(102, 102, 102) 21px);
}
/* text content */
div[class^='elbow-'][class*='-botrt-']:after {
top: 10px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
position: absolute;
content: attr(data-text);
color: rgb(0, 0, 0);
}
<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>

Answer 2

Please try this code sample sample pen
body {
background: #000;
}
.elbow {
background: rgb(102,102,102);
color: red;
width: 150px;
height: 100px;
padding: 10px 20px;
border-bottom-left-radius: 50px;
position: relative;
}
.elbow:before {
content: '';
width: 40px;
height: 75px;
background: #000;
position: absolute;
right: 0;
top: 0;
border-bottom-left-radius: 25px;
}
<div class="elbow">
ELBOW 1
</div>