Wrapping CSS pseudo-element

css before
prevent :after element from wrapping to next line
how to use :before and after in inline css
wrap text css
span nowrap
css overflow text wrap
css don t wrap text
css text not wrapping in div

Is it possible to simulate a div around b and c items and to style it without changing this HTML?

I know there are ::before and ::after pseudo-elements but couldn't find any "wrapping" element. Maybe something like ::wrap(.b, .c).

<ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
</ul>

A good example could be isolating and putting a single background image behind b and c.

Wouldn't you just do something like,

li.c,li.b { border: 1px solid black; }

Text Wrapping & Inline Pseudo Elements, I love posts like this. It's just about adding a little icon to the end of certain links, but it ends up touching on a million things along the way. I. A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element (s). For example, ::first-line can be used to change the font of the first line of a paragraph. Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

You can use the border property and apply it to the b and c class:

li.b {
    border:1pt solid black;
}

li.c {
    border:1pt solid black; 
}

http://jsfiddle.net/ykjv16d8/1/

From your comments:

You can set the border-bottom to none for b and the border-top to none for c

li.b {
    border:1pt solid black;
    border-bottom: none;
}

li.c {
    border:1pt solid black; 
    border-top:none;
}

http://jsfiddle.net/ykjv16d8/2/

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do, It's pretty amazing what you can do with the pseudo elements :before and :after. internal wrapping elements or repetitive and cluttery spacing declarations. What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element; Insert content before, or after, the content of an element

Assuming no margin between list items, this will work:

li.b, li.c {
  border: 1px solid black;
}

li.b {
  border-bottom: none;
}

li.c {
  border-top: none;
}
<ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
</ul>

Proposal: Add wrapper pseudo element · Issue #588 · w3c/csswg , ianthedev changed the title [css3-selector]: Proposal: Adop ::wrap pseudo element Proposal: Add ::wrapper pseudo element on Oct 18, 2016. An introduction to CSS pseudo-element hacks CSS is a versatile style language that is most frequently used to control the look and formatting of an HTML document based on information in the document tree.

If i understand you want both b and c to be in one box??

try this

html

<ul>
  <li class="a">a</li>
  <li class="b bc">b</li>
  <li class="c bc">c</li>
  <li class="d">d</li>
</ul>

css

.bc {
   border: 1px solid red;
 }

.b.bc {
  border-bottom: none;
}

.c.bc {
 border-top: none;
}

is that what you mean? let me know

An introduction to CSS pseudo-element hacks – Nicolas Gallagher, The :first-line pseudo-element can be treated as if it were an extra HTML inline element wrapping only the first line of text in the paragraph. What CSS giveth, CSS can taketh away. What I mean is that pseudo element content can be applied or removed conditionally via media queries. Perhaps you apply an icon when space is limited, and replace that with a more descriptive word when there is more room. Apply typographic flourishes

There is not (currently) a solution for this using good old CSS psuedo elements.

Preventing Icon Wrap After Text, When the container shrinks, the icon wraps to the next line. (This felt like something that should be really easy and has been solved a million times before. The image (or an element set to inline-block ) creates a boundary,  The word-wrap property allows long words to be able to be broken and wrap onto the next line. no. Read about animatable. JavaScript syntax: object .style.wordWrap="break-word" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property. word-wrap: normal|break-word|initial|inherit;

CSS Pseudo-Elements Module Level 4, For instance, the ::first-line pseudo-element can select content on the first formatted line of an element after text wrapping, allowing just that line  CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match. ShopTalk is a podcast all about front-end web design and development. CSS-Tricks Presents 📅 Upcoming Front-End Conferences

Learning To Use The :after And :before Pseudo-Elements In CSS , If you wrapped the URL reference in quotes, then it would become a literal string and insert the text “url(image.jpg)” as the content, instead of  Text Wrapping & Inline Pseudo Elements. A really common pattern on the web is adding an icon or indicator using a pseudo element so it appears before or after an element, such as an external link indicator:

Text Wrapping & Inline Pseudo Elements - Frontend Weekly, A really common pattern on the web is adding an icon or indicator using a pseudo element so it appears before or after an element, such as an external link​  Please find the information of ::wrap pseudo element through this hyperlink. There are abundant use cases of this pseudo element. For example, because there has been no wrapper element for wrapping <dt> and <dd> pairs in description list

Comments
  • Removed the "border" case. Intention is to group elements and not to put a border. Background image can be a good example if no specific solution is given for that.
  • There are no wrapping pseudo-elements. And adding a wrapper element to .b and .c (manually or with JavaScript) is impossible, because only li is valid as a child of ul.
  • Sorry I was not clear and just made an edit. I mean one border around both but my intention is not the border itself. I want to simulate a div around them.
  • I confused everybody asking to put a border. I need to simulate a div around them without changing html. Try to put a background image using the same solution.