Psuedo-element text需要垂直調整，需要什麼CSS？

Question

我有一些代碼，這是爲了使從垂直彎曲邊界如所附圖片顯示的右下方：

但正如你所看到的，文字是不正確的spot ...授予，它與DIV主要部分的主垂直右壁相距10像素，但頂部的填充不是7px。我已經嘗試使用line-height來渲染「填充」，但是您在這裏看到的是line-height: 0 ......進一步降低並不會讓它變得更高......然而，增加它會將它進一步拉低。

是否有任何我可以渲染此代碼，使得「ELBOW 1」從DIV的頂部出現7px，但仍然保留標記內的文本內容作爲數據屬性？

的jsfiddle：下面https://jsfiddle.net/eliseo_d/b83d9ytL/3/

代碼：

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); 
} 

更新：由於某些原因的影響字體不渲染正確地在小提琴... Thi旨意不會在我原來的本地代碼的問題，但上面仍然站立的填充問題...

Answer 1

是的，在這裏我們去。

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

請嘗試此代碼示例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>