Как уменьшить длину границы элемента?

Question

Мой вопрос очень коротко и ясно .. Я хочу, чтобы более короткий разделитель, чем это:

.myclass{ 
 
    border-left: 1px solid; 
 
    margin-left: 4px; 
 
    padding-left: 4px; 
 
    height: 3px; 
 
}

<span>Age</span><span class="myclass">21</span>

Это ожидаемый результат:

Как вы видите, Я установил height: 3px, но все же высота этого span больше, чем 3px. Как я могу сделать эту границу короче?

Answer 1

Установка высоты встроенного элемента не будет иметь никакого эффекта. Добавить display: inline-block; для того, чтобы уважать height: 3px;

Answer 2

Я предполагаю, что вы пытаетесь сделать высоту границы менее, не обязательно уменьшая высоту span тега (который содержит текст).

В этом случае вы можете просто использовать псевдоэлемент (например, ::before), который вы можете контролировать с помощью CSS.

.myclass::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 3px; 
 
    width: 1px; 
 
    background: #000; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
}

<span>Age</span> <span class="myclass">21</span>

Обратите внимание, как линия 3px высока.

Answer 3

Сохраните это. Просто используйте | символа в HTML.

Demo.

<span>Age |</span> 
<span class="myclass">21</span> 

.myclass { 
    padding-left: 4px; 
    height: 3px; 
}