Doesn't Angela need an absolute position for pseudo::after/before ? The
content: "" as Philippe mentioned is key with those pseudos !
Angela French wrote:
That was the key Philippe. It is showing now! Thank you. I just need to
position it a bit. It is a circle graphic and the right edge of the circle is
flush with the last letter. It didn't really put it after - it put it at the
end.
-----Original Message-----
From: Philippe Wittenbergh [mailto:e...@l-c-n.com]
Sent: Tuesday, September 29, 2015 4:57 PM
To: Angela French
Cc: CSS-D
Subject: Re: [css-d] trouble with background-image in p::after
On Sep 30, 2015, at 08:39, Angela French<afre...@sbctc.edu> wrote:
I have the CSS and html below , but it is not displaying the image in the
rendered page. The path to the image is correct and the image is there. Is my
syntax correct in the use of the ::after?
...
p.studentredirect::after{
background-image:url("/_resources/images/circlearrow.gif") right
no-repeat; }
For the ::after pseudo-element to do anything (that is: to appear) you need as
a minimum to specify the `content` property:
E::after {
content: '';
}
With that you'll have an ::after element that is still empty and sized to 0 x
0px but it 'exists' as far as your CSS is concerned. Give it some width and
height, specify the display property (`inline` being the initial value).
as it is, your `p.studentredirect::after` is empty and doesn't exist.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
