Основные различия между content и attr-функциями в CSS:

1. content позволяет статически или динамически устанавливать содержимое псевдоэлемента. 2 С его помощью можно добавить на страницу то, чего нет в HTML-разметке. 1
2. attr() получает значение любого атрибута элемента и использует это значение прямо в стилях. 14 Функция может получать значения из любых атрибутов элемента, включая кастомные data-атрибуты из HTML5. 3

Таким образом, content используется для установки содержимого, а attr() — для получения и использования значений атрибутов элемента в стилях. 24

Например, с помощью свойства content и функции attr() можно получить значение URL, указанное в атрибуте href, и использовать его в стилях для печатной версии страницы. 3