bottom aligned content inside link

Question

I have a simple link in HTML

<a href="#">this is a link</a>

and this is the CSS

a {
    height: 500px;
    outline: 1px #000 dotted;
}

I can´t push the content to the bottom of the link. It can´t be that hard right?

this is how it looks

...................
. this is a link  .
.                 .
.                 .
.                 .
...................

this is what I need

...................
.                 .
.                 .
.                 .
. this is a link  .
...................

a is an inline element so you cannot give it a height ... you need to first make it block or inline-block and then you have a lot of duplicates ... — Temani Afif, Feb 25 '18 at 08:25

score 1 · Answer 1 · answered Feb 25 '18 at 03:43

1

Try this:

a {
    height: 100px;
    outline: 1px #000 dotted;
    display: inline-flex;
    justify-content: flex-end;
    flex-direction: column;
}

<a href="#">This is link</a>

answered Feb 25 '18 at 03:43

Delowar Hosain

score 0 · Answer 2 · answered Feb 25 '18 at 03:42

0

This should do the trick

a {
height: 500px;
position: relative;
outline: 1px #000 dotted;
display: block;
}
a span {
  position: absolute;
  bottom: 0;
}

add a span like this

<a href="#"><span>this is a link</span></a>

answered Feb 25 '18 at 03:42

Amit Joshi

score -2 · Answer 3 · edited Feb 25 '18 at 04:57

-2

You can use:

a {
  position: relative;
  outline: 1px dotted #000;
  top: 20px;
}

edited Feb 25 '18 at 04:57

Mohammad Usman

answered Feb 25 '18 at 03:28

beynDestroyer

3 Answers3