Jump to content
  • 0

Псевдоэлемент :after


Temiks
 Share

Question

Здравствуйте. Возник один вопрос: можно ли сделать через один див подобное c использованием псевдоэлементов :before или :after?

s_1409219496_8648769_7ccab7e7cb.png

Код можно править тут

--

Дополнение: получается изначально диву задана ширина в 100%, после чего его ширина изменяется до 100рх и центрируется по центру.

Edited by Temiks
Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

Здравствуйте. Возник один вопрос: можно ли сделать через один див подобное c использованием псевдоэлементов :before или :after?

s_1409219496_8648769_7ccab7e7cb.png

Код можно править тут

--

Дополнение: получается изначально диву задана ширина в 100%, после чего его ширина изменяется до 100рх и центрируется по центру.

Если я правильно понял, то как-то так http://jsfiddle.net/t34nqzdz/5/

Edited by darknebel
Link to comment
Share on other sites

  • 0

Не совсем понятно, зачем в данном случае ограничиваться только одним элементом. Да, можно воспользоваться предложенным вариантом, но в таком случае будет жёсткое ограничение на контент зелёной области — только текст и ничего более. Поэтому в данном случае ограничение одним элементом избыточно, на мой взгляд. Больше минусов от него.

Edited by hypnocolor
Link to comment
Share on other sites

  • 0
Не совсем понятно, зачем в данном случае ограничиваться только одним элементом

хотел код

<div class="wrap" >    <div class="content" >         <p>content block</p>    </div></div>

заменить на

<div class="wrap" >     <p>content block</p></div>
Да, можно воспользоваться предложенным вариантом, но в таком случае будет жёсткое ограничение на контент зелёной области — только текст и ничего более

Нет, такое не подходит, в контенте будут размещены разные блоки, с разным позиционированием. Так что тогда вернусь к изначальному коду :unsure:

Link to comment
Share on other sites

  • 0

Рома Комаров недавно высказался, и я склонен с ним согласиться:

 

Maintainability is so much more important than “clean HTML”. HTML is not data. Do not use “smart” CSS where you can write dumb HTML.

Edited by hypnocolor
Link to comment
Share on other sites

  • 0
Do not use “smart” CSS where you can write dumb HTML.

Хорошо, прислушаюсь к его мнению. ^_^

Но по правде говоря, мы же сейчас не используем тег <br>, а используем вместо него, например, span у которого стили прописаны display: block

Edited by Temiks
Link to comment
Share on other sites

  • 0

Хорошо, прислушаюсь к его мнению. ^_^

Но по правде говоря, мы же сейчас не используем тег <br>, а используем вместо него, например, span у которого стили прописаны display: block

 

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

Edited by hypnocolor
Link to comment
Share on other sites

  • 0
В данном случае он говорит о том, что нет ничего плохого, если в какой-то ситуации воспользоваться дополнительным дивом или спаном для решения задачи, вместо того, чтобы пытаться нагородить эти элементы с помощью css

Я не совсем корректно перевел. Спасибо за разъяснение ^_^

p.s если у кого-то все же это получится реализовать с одним дивом, вместо двух, с дальнейшем размещением любого контента и различных блоков - буду очень благодарен, т.к. самому интересно. :)

Edited by Temiks
Link to comment
Share on other sites

  • 0

Вообще, то же самое, что в исходном варианте прописано у .green, можно прописать для параграфа, тогда .green вообще можно убрать, оставив только параграф — вот и минус один тег.

Edited by hypnocolor
Link to comment
Share on other sites

  • 0
Вообще, то же самое, что в исходном варианте прописано у .green, можно прописать для параграфа, тогда .green вообще можно убрать, оставив только параграф — вот и минус один тег.

Это был просто пример, на самом же деле там может быть не только параграф, могут быть другие теги(блоки) и тогда нужно будет прописывать каждому классу стиль через группировку, к примеру

.block1, .block2, block3 {width: 100px;margin: auto;}

Еще думал про такое: хотя нет, это не подойдет под все случаи.

body {text-align: center;}
Edited by Temiks
Link to comment
Share on other sites

  • 0

Можно же сделать общий класс (ширина в 100 точек, расположить посередине) и давать его каждому блоку, а для дополнительного оформления каждому блоку свои дополнительные классы придумать.

Link to comment
Share on other sites

  • 0
Можно же сделать общий класс

Верно, но думаю лучше все же сделать через два дива :D:lol:  Это удобно, когда несколько элементов, а если их в дальнейшем будет 100, то это кошмар..

Link to comment
Share on other sites

  • 0

Теоретически, в новых браузерах можно извернуться как-то так. Практически, я согласен с Комаровым и hypnocolor-ом (и не только): не стоит борьба с этой несчастной оберткой таких контринтуитивных подвыподвертов в стилях.

 

Я бы сказал, что у внешнего контейнера (структурного «строительного блока» страницы) и внутренней обертки (общий контейнер содержащейся там информации) даже есть своя отдельная семантика :). Во многих случаях можно заменить внутренний div на section и разграничить визуальную и логическую обертки еще более явно.

  • Like 1
Link to comment
Share on other sites

  • 0
Теоретически, в новых браузерах можно извернуться как-то так.

Спасибо, интересное решение! ^_^


Если я правильно понял, то как-то так http://jsfiddle.net/t34nqzdz/5/

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

Хороший способ предложил SelenIT, только вот ie9 не поддерживает фон :unsure: , но в ie10 уже все отлично :yahoo:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy