Определение ширины для пользовательского стиля подчеркивания с помощью: после - PullRequest
Новая
       37

Определение ширины для пользовательского стиля подчеркивания с помощью: после

0 голосов
/ 22 апреля 2020

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

В настоящее время я использую content '' , заполненный пробельными символами Юникода, чтобы соответствовать ширине копии, к которой я применяю # nav .

В настоящее время это означает создание отдельного стиля для каждого элемента навигации и настройку пробелов для каждого. Я задавался вопросом, может ли кто-нибудь помочь с определением ширины моего подчеркивания на основе копии, к которой применяется # nav , или даже более чистого решения в целом.

Вот мой текущий css (да, тип вертикальный)

Любая помощь очень ценится. 

#nav {
    color: red;
    font-family: "Titling Gothic FB Normal", Icons /*!Persona*/;
    font-style: normal;
    font-weight: 700;
    writing-mode: vertical-lr;
    font-size: 2.6rem;
    margin-left: 1rem;
    letter-spacing: 0.1rem;
    -webkit-text-fill-color: white; 
    -webkit-text-stroke-width: 1.3px;
    -webkit-text-stroke-color: red;  
}

#nav:after {
    content: '               ';
    position: absolute;
    left:2rem;
    top:2.5rem;
    -webkit-text-stroke-color: blue;
    font-size:3rem;
     text-decoration-line: underline;
    text-decoration-style: wavy; 
}
...