Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to use pseudo-elements (:after, :before) inside a table row?

I want to add absolutely positioned element as an :after (of :before) of a table row.

Look at this:

table {
  border: 1px dotted gray;
  border-collapse: collapse;
  border-spacing: 0;
  td {
    padding: 0;
    margin: 0;
    width: 100px;
    background: rgba(255, 0, 0, 0.2)
  }
}

table.a .special::before {
  content: 'a';
}

table.b .special::before {
  content: 'a';
  display: block;
  position: absolute;
  right: 10px;
}

table.c .special::after {
  content: 'a';
  display: block;
  position: absolute;
  right: 10px;
}

table.d .special .after {
  display: block;
  position: absolute;
  right: 10px;
  top: 0;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="a">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="b">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="c">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<Br/>
<table class="d">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <div class='after'>a</div>
  </tr>
</table>

I assume that when I add such an element, the rendering engine (at least Webkit based) thinks it is a table cell of some kind.

:before works badly in all browsers. But :after works very well in Firefox and almost good in webkit. In webkit it keeps a small space and makes the whole table width bigger.

enter image description here - This is what bothers me in webkit.

How to fix this? And where can I read about why it is happening?

like image 660
Aleksandr Motsjonov Avatar asked Oct 25 '13 11:10

Aleksandr Motsjonov


People also ask

Can I use a before or after pseudo element on an input field?

The input element has no content in the CSS view, and so has no :before or :after pseudo content. This is true of many other void or replaced elements. There is no pseudo element referring to outside the element.

What do the pseudo selectors before and after allow you to do?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What does the pseudo element :: Before do?

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.


2 Answers

Use the first table cell instead of the row as a host for the absolutely positioned pseudo-element.

row > td:first-child::before {
  content: '';
  position: absolute;
  .
  .
}
like image 130
leonheess Avatar answered Oct 28 '22 10:10

leonheess


In this example, you are using the ::after and ::before pseudo-elements to add content after or before a table row, which essentially will break the table layout and lead to unpredictable results.

If you were to add the generated content to a table-cell, the results would be more consistent.

There is not much to refer to except the original specification for generated content:

http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

In addition, keep in mind that the CSS rendering engine generates anonymous boxes when creating tables:

http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes

However, since generated content is not part of the DOM, the whole table-rendering process probably cannot deal with the extra pseudo-element in a sensible way.

You are delving into an area that is not well specified and any support will be browser specific.

Depending on your layout requirements, you might need to use JavaScript or jQuery to alter the DOM of the table to the desired effect.

like image 20
Marc Audet Avatar answered Oct 28 '22 10:10

Marc Audet