Подчёркивание с помощью text-decoration и псевдоэлементов :before и :after отличается по своим возможностям и применению. 12

text-decoration создаёт подчёркивание непосредственно к тексту, но не позволяет управлять толщиной и точным положением линии. 2 Например, с его помощью можно создать стандартное подчёркивание под текстом, линию, проходящую через текст, или линию над текстом. 1

Псевдоэлементы :before и :after используются для создания линий, расположенных по краям элемента (сверху, снизу, слева или справа). 1 Например, :before создаёт контент перед содержимым элемента, а :after — после. 1 Вместе с пустым контентом, свойствами border и height/width можно создавать линии любой ориентации и длины, точно позиционируя их на странице. 1

Таким образом, text-decoration применяется к тексту, а псевдоэлементы :before и :after — к блочному контейнеру, что позволяет создавать более гибкие линии, которые можно стилизовать и позиционировать независимо от текста. 1