Databases
StackOverflow2013
Postsdbo
POCSS: Pseudo-elements :before and :after inheriting width/height from original element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: Pseudo-elements :before and :after inheriting width/height from original element
    primarykey
    data
    text
    <p>I am using the css pseudo elements :before and :after to give an indent-effect on some of my images on a website. However without specifying the width and height, these won't display. This would have me specifying a fixed width and height for each of the images, which I guess would work for a static webpage.</p> <p>However because these images are generated dynamically with jQuery and are user submitted, images differ in width and height each time. Now I could probably can fix this with Javascript by getting the width from the image and passing it on to the :before, but this seems like it is too much work for something like this. </p> <p>My question is if there is a way to do this with CSS only, to have the width of containing the image being passed on to the :before on this &lt; li >, so that the :before and :after pseudo-elements inherit the width and height of the orginal element.</p> <p>The basic page layout:</p> <pre><code>&lt;ul&gt; &lt;li&gt; &lt;img src="foo" /&gt; &lt;/li&gt; &lt;/ul&gt; # css style simplefied ul{ float:left; list-style:none} li{float:left;} li img{float:left} li:before{ content:"": position:relative; position:absolute; float:left; box-shadow:0 1px 2px rgba(0,0,0,0.4); } </code></pre> <p>PS: compatibility needed is only for mobile Webkit browsers.</p> <p><strong>EDIT</strong></p> <p>I could for instance add lines to the CSS with Javascript by using the following lines:</p> <pre><code>var heightImg = (($('ul li:nth-child(n)').height())) + 'px'; document.styleSheets[1].insertRule('ul li:before { height: ' + heightImg+ '; }', 0); </code></pre> <p>But this would mean that I'll also have to work with dynamic id's. Which won't be hard, but I'm just wondering if there isn't a CSS only way.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMarc Hoogvliet
    1. USMarc Hoogvliet
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS: Pseudo-elements :before and :after inheriting width/height from original element
      1. USKrinkle
      1. VTFavorite
    2. VO
      singulars
      1. POCSS: Pseudo-elements :before and :after inheriting width/height from original element
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCSS: Pseudo-elements :before and :after inheriting width/height from original element
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy do you specify `position` twice for `li:before`?
      singulars
      1. POCSS: Pseudo-elements :before and :after inheriting width/height from original element
      1. USBoltClock
    2. COnot understanding Q, this code (the double positioning aside) produces images in a horizontal line with no space between them, are you saying you want space between them? or are the images never horizontal in the mobile app, if that's the case why use float? then what do you mean by "indent of differing values", do you actually want the images to look centered.. sorry for dumb questions but really not getting what look you're trying to achieve ;) - perhaps an mocked up image of the required look
      singulars
      1. POCSS: Pseudo-elements :before and :after inheriting width/height from original element
      1. USclairesuzy
    3. COSorry for the confusion, With an indented look, I meant that I want to make the images sunk into the page, so I apply a box-shadow on the :before which overlaps the image and gives the image shadowing around the edges to make it appear like it is sunken into the page.
      singulars
      1. POCSS: Pseudo-elements :before and :after inheriting width/height from original element
      1. USMarc Hoogvliet
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload