Negative margin span in H1 tag

HTML & CSS
1

I have a H1 tag

.content h1 {
  height: 2.5rem;
  padding: 1rem;
  font-size: 2.5rem;
  font-family: 'champagne__limousinesbold';    
  font-weight: 600;
  display: inline-block;
}

in which I have 2 spans:
<h1>Welkom bij Late<span class="flip">R</span>R<span class="registered">&reg;<span></h1>
The first span I needed to flip for which I used the following css

.content h1 span.flip {
  display: inline-block;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph; /*IE*/
  filter: fliph; /*IE*/    
}

which is working fine. The second span as you can see is a registered sign, which need to have a different colour and should be vertically aligned at the top, for which I tried the following css

.content h1 span.registered {
  display: inline-block;
  color: #c7312b;
  font-size: 70%;
  vertical-align: top;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;             
}

The colour is changed but I can’t get it to align at the top. Besides the negative margin I tried vertical-align: top as well. What would be the way to go?

2

I must be missing something because I put your code together and the reg sign is at the vertical top already?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.content h1 {
  height: 2.5rem;
  padding: 1rem;
  font-size: 2.5rem;
  font-family: 'champagne__limousinesbold';    
  font-weight: 600;
  display: inline-block;
}
.content h1 span.flip {
  display: inline-block;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph; /*IE*/
  filter: fliph; /*IE*/    
}

.content h1 span.registered {
  display: inline-block;
  color: #c7312b;
  font-size: 70%;
  vertical-align: top;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;             
}

</style>
</head>

<body class="content">
<h1>Welkom bij Late<span class="flip">R</span>R<span class="registered">&reg;<span></h1>
</body>
</html>

What am I missing :smile:

3

You didn’t miss a thing Paul. After I cleared the cache everything worked well. :smile: