CODEWITHSUNDEEP
htmlcss
Ray
Ray

Reputation: 147

Making arrow at end of line stay attached to last word in line

I've tried everything I can think of to make the arrow, at the end of a line, remain attached to the last word and not wrapped to the next line, as columns get narrow, in a responsive environment. I've tried the 'arrow' span both inside and outside the trailing 'a' tag.

<h3 class="title-head"><a href="'link'">Link Text<span class="arrow">►</span></a></h3>

or

<h3 class="title-head"><a href="'link'">Link Text</a><span class="arrow">►</span></h3>

By the way, removing 'display:inline-block' on the 'arrow' does solve the wrap problem, but it creates some others, so I can't use that solution.

SOLUTION from @Temani Afif: This CSS works nicely with the arrow span outside the a tag (second example above):

    .title-box h3.title-head a {
        margin-right:1em; 
    }

    .title-box h3.title-head .arrow { 
    color:#f7941d; 
    font-size:80%; 
    -webkit-transform:scale(.5,1); 
    transform:scale(.5,1); 
    display:inline-block;
    position:relative; 
    bottom:0; 
    font-family:Arial, sans-serif; 
    margin-left:-1.2em;
    }

Upvotes: 0

Views: 1495

Answers (2)

Temani Afif
Temani Afif

Reputation: 273031

Use a non-breakable space &nbsp;

h3 {
  animation:change 2s linear infinite alternate;
  border:1px solid;
}
@keyframes change {
  from {max-width:50%}
  to {max-width:10%}
}
<h3 class="title-head"><a href="'link'">Link Text</a>&nbsp;<span class="arrow">►</span></h3>

With inline-block you can try a margin hack like this:

h3 {
  animation:change 2s linear infinite alternate;
  border:1px solid;
  margin-right:30px;
}
@keyframes change {
  from {max-width:50%}
  to {max-width:10%}
}

.arrow {
  display:inline-block;
  margin-right:-30px;
}
<h3 class="title-head"><a href="'link'">Link Text</a>&nbsp;<span class="arrow">►</span></h3>

UPDATE

Considering your CSS code:

h3 {
  animation: change 2s linear infinite alternate;
  border: 1px solid;
  margin-right: 20px;
}

@keyframes change {
  from {
    max-width: 50%
  }
  to {
    max-width: 10%
  }
}

h3.title-head .arrow {
  color: #f7941d;
  font-size: 80%;
  -webkit-transform: scale(.5, 1);
  transform: scale(.5, 1);
  display: inline-block;
  position: relative;
  left: -.13em;
  bottom: 0;
  font-family: Arial, sans-serif;
  margin-right: -20px;
}
<h3 class="title-head"><a href="'link'">Link Text</a>&nbsp;<span class="arrow">►</span></h3>

Upvotes: 3

elveti
elveti

Reputation: 2386

If I understood you correctly, you could try making the arrow absolutely positioned:

h3 {
  position: relative;
  padding-right: 15px;
}
h3 > span {
  position: absolute;
  top: 4px;
  right: 0;
}

Demo: https://jsfiddle.net/pxqrh1cu/

Feel free to leave a comment if I misunderstood the problem.

Upvotes: 0

Related Questions