Добавляйте, заменяйте или изменяйте текст с помощью CSS

Привет, ребята,

В этом уроке мы увидим, как мы можем добавить текст с помощью CSS, даже в качестве замены существующего текста.

Конечно, есть и другие лучшие методы, модификация php (если ваш сайт сделан на WordPress), но если нам нужно быстрое решение или мы не знаем, как это сделать по-другому, это может вывести нас из более чем одного беда.

Как мы увидим в этом уроке, сделать это очень просто с небольшим количеством CSS.

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

Давайте рассмотрим реальный случай, чтобы было понятнее.

Вот видеоурок:

На следующем изображении мы можем видеть некоторые продукты с их названиями:

Давайте посмотрим, как добавить слово перед названием продукта.

Для этого мы воспользуемся инспектором элементов, чтобы увидеть, куда добавить CSS.

Щелкните правой кнопкой мыши один из заголовков, и мы увидим изображение, подобное следующему:

Мы видим, что справа есть знак +, мы нажимаем на него, и появится следующее пустое правило css:

Поскольку первое, что мы собираемся сделать, это добавить текст перед заголовком, мы собираемся дополнить правило css следующим образом:

h2.woocommerce-loop-product__title:before {
	content: "Producto ";
}

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

Если мы хотим, чтобы оно стояло за названием продукта, мы изменим правило на следующее:

h2.woocommerce-loop-product__title:after {
	content: "Producto ";
}

Если мы хотим заменить текст нужным словом, мы должны добавить следующий код:

h2.woocommerce-loop-product__title {
	visibility: hidden;
}

h2.woocommerce-loop-product__title:before {
	content: " Producto ";
	visibility:visible;
}

Таким образом, сначала мы скрываем название продукта, а затем делаем видимым слово, которое хотели.

Конечным результатом будет:

Помните, что мы должны добавить эти изменения в наш WordPress.

Для этого переходим в Customize —> Additional CSS и добавляем наш код:

Иногда мы можем выйти из интересного беспорядка с небольшим количеством CSS.

Я надеюсь, что вы найдете это полезным, и любые вопросы здесь у вас есть ко мне 😉