• Добро пожаловать на биржу фриланса Justwebber.com

  • Мы делаем удаленное сотрудничество удобным

  • Заказчикам - огромный выбор исполнителей, а фрилансерам - неиссякаемый поток проектов

  • За удаленной работой - ваше будущее и финансовое благополучие

Как вставить на страницу текст через css


Навигатор: Форумы / Предметное общение / Программирование / Как вставить на страницу текст через css
Автор Сообщение

dushman

#1 /21.05.2013 17:56
 64
 

Карма:  5




У меня вопрос по внедрению чего-либо на страницу. Я слышал что можно это делать как-то через css , чтобы допустим какое-нибудь слово добавлялось к блоку, но в html его не было ? Реально это вообще делать , или нужно какие-нибудь скрипты подключать ?


ADMIN

#2 /21.05.2013 18:30
АДМИНИСТРАТОР   


 286
 

Карма:  20




Для такого дела никаких скриптов не нужно. Благодаря возможностям css это вполне решается. Есть такое свойство, под названием content, которое дает возможность вставить генерируемое содержание в текст веб-страницы. Изначально его в коде нет. Оно действует как приставка, которую добавляют к чему-либо. Применяется это свойство совместно с псевдоэлементами :after и :before, позволяющими выводить эту самую приставку до или после объекта.
Итак, есть ссылка , которая ведет куда-нибудь , допустим на главную. У нее есть анкор (текст в теле ссылки). Вот к этой ссылке и попробуем добавить приставку.

<a href="http://justwebber.com">вебмастерам</a>

Если в браузере открыть , то увидим слово вебмастерам , которое будет ссылкой на главную
А если к этому тегу в стилях добавить свойство content , с атрибутом :before , то содержимое появится перед словом вебмастерам. А если добавить атрибут :after , то содержимое появится после слова вебмастерам.
Вот готовый пример реализации, в котором добавим слово Помощь перед , и онлайн после слова вебмастер. В итоге должна получиться ссылка вида Помощь вебмастерам онлайн:

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      a:before {
        content:"Помощь "
      }
      a:after {
        content:" онлайн"
      }
    </style>
  </head>
  
  <body>
    <a href="http://prohtml.net">вебмастерам</a>
  </body>

</html>

p.s. Пробелы в кавычках свойства content учитываются браузером !