Hide text without hiding nested elements

HTML & CSS
1

I have the following HTML code:

<p class="pagination">
   <a>1</a>
   <a>2</a>
   ...
   <a>10</a>
</p>

I need to hide dots on line 4 without hiding links. Is it possible to achieve via css? All links are changed by css to block elements, floating to the left side.

2

Well, you could wrap the dots in a span to segregate them, and providing a styling hook. Then make the span {display: none;}. If you want the dots’ space to be preserved, use {visibility: hidden;}.

cheers,

gary

3

Problem is, I can’t. That is for forum style, which should work without any modifications to forum software, so I can’t add span to it.

4

Maybe you could absolutely position the .pagination paragraph off screen and just move the <a> elements back on screen again. A bit messy, though. Seems a bit silly not to be able to modify the software. It would probably be as simple as deleting those dots once and for all.

5

Depending of what you want, it might be possible, as you did not mentioned spacing:

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Title</title>
<style>
p {visibility:hidden;}
p a {visibility:visible;}
</style>
</head>
<body>
<p class="pagination">
   <a href="#">1</a>
   <a href="#">2</a>
   ...
   <a href="#">10</a>
</p>
</body>
</html>
6

It turns out that it is “possible” to manage spacing, although it should depend on font-family:

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Title</title>
<style>
p {visibility:hidden;letter-spacing:-.25em;}
p a {visibility:visible;letter-spacing:normal;}
</style>
</head>
<body>
<p class="pagination">
   <a href="#">1</a>
   <a href="#">2</a>
   ...
   <a href="#">10</a>
</p>
</body>
</html>
7

I admit my idea was messy, but here’s a simple example.

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Title</title>
<style>
p {position: absolute; left:-10000px;}
p a {position: absolute; left: 10010px;}
p a + a {left: 10030px;}
p a:last-child {left: 10050px;}
</style>
</head>
<body>
<p class="pagination">
   <a href="#">1</a>
   <a href="#">2</a>
   ...
   <a href="#">10</a>
</p>
</body>
</html>
8

Brilliant. Thanks!

9

I like zoom’s solution better if it works cross-browser. It’s like if the OP wanted to make the dots blue and the anchors red, you’d do the same thing.

10

The use of a font stack with fonts with the same metric or fairly the same metric should solve the problem with font-family, because the negative spacing depends on font-family, but if fonts have the same metric, that becomes a moot point.