Actily hovered link shifts paragraph

The paragraph unfortunately shifts when a link is being hovered. Perhaps
someone could suggest some CSS that will: one, increase size of the hovered link
and two, create padding around the link in order to not effect the paragraph.

I have included a some example below: :slight_smile:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title Polyhedra</title>
<style>
[class="xref"]:hover
{
  font-size: 2em;
}
</style>
</head>
<body>
						
<main>
<p>
In rder to work on a Linux system directly<a id="id426967" class="indexterm"></a>, you will need to provide a
user name and password.  You always need to authenticate to the system.  As we
already mentioned in the exercise from <a class="xref" href="ch01.html" title="Chapter&nbsp;1.&nbsp;What is Linux?">Chapter&nbsp;1, <i>What is Linux?</i></a>, most PC-based
Linux systems have two basic modes for a system to run in: either quick and
sober in text console mode, which looks like <span class="application">DOS</span> with mouse, multitasking and
multi-user features, or in graphical mode, which looks better but eats
more system resources.
</p>
</main>
</body>																	
</html>


Thanks
Polyhedra (Daniel)

[font=calibri]It’s not ideal having text change size when you :hover, because as you’ve seen, it does tend to do nasty things to the contents around it. Generally it’s better to apply effects such as colours, borders and backgrounds rather than changing the size or weight, for exactly that reason.

If you absolutely have to have the font changing size, there are a couple of ways to do it.

Method one - images
Create a sprite image with the smaller and larger text on, and then position this so that it shows the relevant bit of the sprite for normal and :hover. This will ensure that the right amount of space is reserved and there is no impact on the surrounding text. On the downside, it could be a lot of work if you have a lot of links, and it’s not great for accessibility.

Method two - CSS
You can wrap a <span> around the <a> element, and then set it to display:inline-block; and set a height and width (in ems) that will be sufficient to encompass the enlarged text. This will ensure that enough height and width is reserved, so there will be little impact on the surrounding text. However, the line that the link is on will still move up and down within that space as you :hover. The downside is that this is still a bit ugly, and you will need to work out a suitable width for each link individually depending on the text length.[/font]

a:hover {font-size:2em; padding:1px}

And what does that do? Nothing useful, the whole point of the question was about how to make sure that changing the font size on :hover doesn’t move things around.