In article <
MPG.3cf17696f...@news.individual.net>, Stan Brown
wrote...
Interesting puzzle. I bet there's a compelling and elegant solution, but I
don't know what it is...
First observation is that this may possibly not be an appropriate use of
'float'. You choose float when you *do* want other elements to flow around the
floated object. But perhaps there's a logo or whatever that you do want to
appear to the left of this "address" block, so the float is needed. Otherwise,
all you need to do is have a 100% wide block, text-align'd to the right.
Secondly, it's arguable that you're trying to put into a rule for one object
properties which are to apply to another (the following element). Something
about that doesn't seem quite right!
I think I've spotted why your code didn't work. Picking through Eric Meyer &
Estelle Weyle's "Definitive Guide to CSS" (4th Edition) I see the ::after
pseudo-selector can take a 'content' property which makes explicit what it is
you are inserting after the element, optionally followed by any other
properties include styling. So you could have:
p.letterdateline::after {content: "hello"; color: red}
But you aren't inserting anything, so the styling you apply doesn't have a
target. Try this:
p.letterdateline::after {" "; clear:both}
That puts in an arguably superfluous space, but at least the clear directive
has something to chew on. You might try an empty string, with or without the
use of the content property. Clear is only valid for block elements, so you
may need to include display:block; as well. In theory you could put a newline
in there as \A, though Meyer & Weyl note that this isn't currently at all
widely supported (publication 2018).
Otherwise, going back to the notion that you're really targeting the properties
of the element following your address block, the "adjacent sibling" selector
'+' may do the trick.
p.letterdateline + p {clear:both}
This may be generalisable to any adjacent sibling:
p.letterdateline + * {clear:both}
None of this is tested - I do have my own work to do! And what a rabbit-hole
that post turned out to be :-)
--
Phil, London