Перейти к содержимому

Фотография
- - - - -

Составной "content:" с помощью LESS


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
Сообщений в теме: 2

#1 Liveforblaze

Liveforblaze

    Прохожий

    Топикстартер
  • Новичок
  • 0
    2 сообщ.

Отправлено 22 Апрель 2018 в 12:09

Собственно есть задача:

...
<li data-info="data 1">some-Text</li>
<li data-info="data 2">some-Text</li>
...
<li data-info="data N">some-Text</li>

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

* some-Text with data 1
* some-Text with data 2
...
* some-Text with data N 

Попытался реализовать я это с помощью псевдокласса:

li:after {
   content: attr(data-info);
}

Но у меня получается следующее:

* some-Textdata 1
* some-Textdata 2
...
* some-Textdata N

Собственно как добавить слово "with" с пробелами?

Если использовать конструкцию:

@a: 'with ';
@b: attr(data-info);
 
content: "@{a} @{b}";

, то получается примерно следующее:

* some-Text with attr(data-info)
* some-Text with attr(data-info)
...

Помогите советом, я уже всю голову себе сломал. Надо реализовать с помощью CSS + LESS без JS


  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1004
    3 629 сообщ.

Отправлено 22 Апрель 2018 в 13:47

Смысл использовать LESS, там где и без него работает хорошо?

content: "with " attr(data-info);

Не забудь выставить display: inline-block;


  • 0

#3 Liveforblaze

Liveforblaze

    Прохожий

    Топикстартер
  • Новичок
  • 0
    2 сообщ.

Отправлено 22 Апрель 2018 в 14:11

Все оказалось гораздо проще чем я думал. Спасибо большое!
  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей