нарисуйте стрелку под текстовой строкой со стилями css

Question

text-decor-line css имеет подчеркивание, подчеркивание для украшения текстовой строки. Но я хочу далее, подчеркивание должно иметь стрелку, указывающую влево или вправо. Кажется, использование text-украшение-line не может выполнить эту задачу.

Я хочу выделить мою строку следующим образом:

  THIS-IS-A-CHALLENGE-TIME                            
            --------> 

Подчеркнутое стрелкой должно быть связано со словами. В приведенном выше примере я хочу подчеркнуть слово CHALLENGE подчеркиванием, указывающим на право. Любая помощь будет оценена.

Answer 1

Попробуйте использовать border-bottom: 2px solid black; вместо text-decoration для подчеркивания и :after для заголовка стрелки.

.arrow {
  position: relative;
  border-bottom: 2px solid black;
  padding-bottom: 4px;
}

.arrow:after {
    position: absolute;
    margin-left: -6px;
    content: ">";
    bottom: -9px;
}

THIS-IS-A-<span class="arrow">CHALLENGE</span>-TIME