spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

Before and After Pseudo Elements


The CSS specification says :

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

In order to solve your issue, you can use the solution suggested by Nico O. The after pseudo-element is absolute positionned at the bottom of the main element.

#strip{
  width: 100%;
  height: 130px;
  background: grey;
  position: relative;
  padding-bottom: 10px;
}
#strip:after {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: blue;
  position: absolute;
  bottom:0;
}    
#strip:before {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: yellow;
}

Categories : HTML

Related to : Before and After Pseudo Elements
The toggleClass duration doesn't work on pseudo-elements
toggleClass have doesn't contain duration parameter. if you want animate feature use jquery .animate() the syntax is $(selector).toggleClass(classname,function(index,currentclass),switch); classname Required. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a space function(index,currentclass) Optional. Specifies a function that ret

Categories : Jquery
IE: remove underline on pseudo-element
As text-decoration: underline; can't be overridden in IE you could use border-bottom: 1px solid green; instead. This can then be overwritten on the :before by setting its border colour to the background colour (in this case white). This will only work on solid colour backgrounds though. a { color: green; display: inline-block; padding-left: 9px; position: relative; text-decoration:

Categories : CSS
Set pseudo element height through jQuery
You just have to append the style tag inside the onload handler $(window).load(function(){ var sectionHeight = $('.checkheight').outerHeight(true); $('<style>#section1:before {height: ' + sectionHeight + 'px;}</style>').appendTo('head'); });

Categories : Jquery
Busy indicator in pseudo after element next to/outside button
I can't understand this: I can add a rule like left: 100px to push it right and outside the button, but that is not what I am looking for: still the space is reserved inside the button. I cannot use absolute positioning, since the button text is flexible (translations) What do you mean? Here is a jsFiddle which appears to solve your problem. Give the element absolute positioning, and give

Categories : HTML
Pseudo tags "before" & "after", border-left doesn't work in IE
This is a known interop-issue between Internet Explorer and other browsers. We have actually already began shipping changes to the underlying engine to better-render this use-case. Below is a side-by-side of Internet Explorer 11, and our streamable in-development version on http://remote.modern.ie, also available in our Windows 10 preview: The primary culprit here is the use of display: table-

Categories : CSS
Recently Add
Div to Wrap Content?
Vertically align an inline-block next to an inline-block that is taller
3x3 table in css and html each side different colour
Adapt website for blind people
Toggle menu is not working in the mobile device
Silverstripe 3: How to remove html text from GridField in EditForm view?
Max height - change when window is resized?
How can I create a non-repeated outside border image?
How to insert raw html in jade file (not include external html file)
Background-image repeating when resize window (background-repeat is no-repeat)
CSS: Horizontally centering in a container smaller than the actual element
Will subdomain and Wordpress interfere with eachother?
Sub menu in specific location
Disabling border-collapse for single columns and rows
Call function in asp from onclick button
Background bigger than iframe
If Else button pressed in HTML5?
How to get multiple rotating background cover with css / Full screen slideshow
Two divs side-by-sideā€”one in the centre, the other on the right
Chrome hides SPAN if "list-style-type" is "none"
How can I change the size of my css button in outlook?
Retain table layout while using block display for tbody
Align image in unordered list with list items
Background-color covers previous line
Sending a web page as HTML mail from Perl
Correctly formatting arrays in HTML
HTML/CSS - Change color of inputbox if certain number of chars is entered
Polymer SVG as CSS background-image not working
inside a
how to replace or update json value in file?
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.