Выравнивание символов в строках разных размеров с помощью css

Question

У меня есть <, который является частью строки < ALL APPS, которая отличается от других символов в строке. Я могу изменить его размер, используя селектор ::first-character. Но остальные символы должны появляться в центре текста, как на первом изображении ниже.

.scss

.allapps { 
    a { 
    font-size: 12px; 
    line-height: 2; 
    } 

    a::first-letter { 
    font-size: 29px; 
    margin: 10px 5px 10px 18px; 
    line-height: 1; 
    } 
} 

_nav.html.erb

<div class='well well-lg'> 
    <ul class='nav nav-pills'> 
    <li class='allapps bold'><%= link_to '< ALL APPS', list_apps_path %></li> 
    <li class="<%= 'active' if @version_type == "test" %> pull-right"> 
     <%= link_to 'TEST', list_versions_path(params["app_id"], version_type: :test)%> 
    </li> 
    <li class="<%= 'active' if @version_type == "main"%> pull-right"> 
     <%= link_to 'MAIN', list_versions_path(params["app_id"], version_type: :main) %> 
    </li> 
    </ul> 
</div> 

желательно

фактическое

Answer 1

Вам также необходимо установить вертикальное размещение символа «<». Это лучше всего делать с относительным позиционированием, так как vertical-align обладает специальностями и отличиями в реализации. Вы должны обернуть символ «<» в элементе span для стилизации, так как нет гарантии, что :first-letter соответствует символу, который не является буквой (буквенный); спецификации являются неопределенными, а реализации различаются.

Простой чистый HTML и CSS демо:

.allapps { 
 
    font-size: 12px; 
 
    font-family: Arial, sans-serif; 
 
    font-weight: bold; 
 
} 
 

 
.allapps .lt { 
 
    font-size: 29px; 
 
    position: relative; 
 
    top: 6px; 
 
}

<div class=allapps><span class=lt>&lt;</span> ALL APPS</div>

Точная величина смещения (значение top в примере кода) должна быть определена эмпирически; это зависит от шрифта (и суждения).