CODEWITHSUNDEEP
htmlcsscss-selectors
user3713442
user3713442

Reputation: 498

Highlighting text using a span within a span

I'm trying to develop a marquee "ticker" on a website using CSS and keyframes, with the text populated via a php script. What I have is as follows:

<style>

.marquee {
width: 1000px;
height: 25px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
border: 1px solid #FF0000;
background: GhostWhite;
color: black;
font-size: 20px;
}

.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}



.marquee span:hover {
 -moz-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 animation-play-state: paused;
 }


/* Make it move */
@keyframes marquee {
0%   { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}

</style>

<center>
  <p class="marquee"><span><?php echo outputstring; ?></span></p>
</center>

The string is populated at present using just a simple php script:

<?php

 $outputstring = '';
 $outputstring.= 'some text';
 $outputstring.= ' some more text ';
 $outputstring.= ' yet more text ';

?>

At present, it works fine, but what I would like to do is place coloured text markers within the outputstring - white writing on a red background to inform users of new content:

  $outputstring = '';
  $outputstring.='<span class="internalmarquee">&nbsp;NEW&nbsp;</span>';
  $outputstring.= 'some text';
  $outputstring.='<span class="internalmarquee">&nbsp;NEW&nbsp;</span>';
  $outputstring.= ' some more text ';
  $outputstring.= ' yet more text ';

With the following defined

 .internalmarquee
 {
  color:white;
  font-weight:bold; 
  background-color: red;
 }

But now, when I run the code, the entire marquee is initially blank, but just as the text should appear, scrolling left it becomes red obscuring all the text. Can anyone please suggest a fix? Many thanks!

Upvotes: 0

Views: 1079

Answers (1)

Johannes
Johannes

Reputation: 67748

You need to use .marquee > span instead of .marquee span in your CSS, and same for its :hover state to address only the direct span children. Otherwise that CSS will affect all spans inside the .marquee container.

Upvotes: 1

Related Questions