What is the best way to place text within a link at the bottom corner?

I have a card that needs to be covered by a link with text at the bottom corner. Currently, the text is located at the top. How can I move it to the bottom while keeping the link covering the card?

.card{
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
width: 200px;
height: 250px;
padding: 10px;
position: relative;
}

.card a {
color: red;
text-decoration: none;
padding: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

.card a:hover {
cursor: pointer;
text-decoration: underline;
}
<div class='card'>
<p>Some description goes here</p>
<a href='#'>Read more</a>
</div>

htmlcss

Answer №1

Commonly referred to as a stretched link (such as in Bootstrap), this technique utilizes pseudo elements (before/after) that are positioned using absolute, allowing the original element to be placed elsewhere.

To position the link at the bottom of the card (without relying on absolute positioning), I've applied flex to the .card class and added margin-top: auto to the a element.

An example implementation would look like this:

.card {
  display: flex;
  flex-flow: column;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 250px;
  padding: 10px;
  position: relative;
}

.card a {
  color: red;
  text-decoration: none;
  margin-top: auto;
}

/* ↓↓ Here's the magic ↓↓ */
.card a:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.card a:hover {
  cursor: pointer;
  text-decoration: underline;
}
<div class='card'>
  <p>Insert your description here</p>
  <a href='#'>Read more</a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: https://i.sstatic.net/Wa4mo.jpg with this new link: https://i.sstatic.net/hqVuQ.jpg without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restrictio ...

javascriptjqueryhtmlcss

Tips for automatically closing submenus in a dropdown menu using Bootstrap 4

I am trying to figure out how to make sure that when I close my dropdown menu, the submenu within it also closes. Currently, the submenu remains open if I toggle the dropdown menu again. Visit this link for reference Here is the HTML code snippet: & ...

javascriptjqueryhtmlcssbootstrap-4

Changing up the content within a jQuery class

I have 10 <p> tags in my HTML with the class of .rule I am looking to update the text for each of them independently without resorting to individual IDs like #rule1, #rule2, #rule3: $('.rule').eq(0).text('Rule 1') $('.rule& ...

javascriptjqueryhtml

Photo does not display on HTML webpage

Why isn't my image showing up in the HTML code below? <tbody> <tr> <td>1517 N Lotus</td> <td><img src = "0004livingroombrown.jpeg" alt ="livingroom" width="92"height="120"></td&g ...

html

In what way does Codesandbox create a resizable grid layout for components?

I am looking for guidance on implementing resizable windows like those in CodeSandbox and VS Code using React. How does CodeSandbox achieve this functionality? Could someone help me get started in the right direction? ...

javascripthtmlcssreactjs

Displaying a variable in a live HTML user interface

I have successfully created a Python program that captures data from an Arduino Potentiometer and shows it on the Python console. Now, I am working on enhancing the output by displaying it in a local HTML file. I am seeking guidance on how to incorporate t ...

javascriptpythonhtmlcss

What is the reason for the malfunction of the <br /> tag in React?

Check out this code snippet <div className='product'> <img className='productImg' src={this.props.image} alt='person'></img> <div style={{float:'left'}}>{this.props.name}</div> ...

htmlreactjs

PHP receive apostrophe from $_GET array

Similar Question: “slash before every quote” issue Hello there, I am currently attempting to utilize $_GET in order to transmit the contents of a text box to another php file. However, whenever I include single (') or double (") quote ...

phphtml

How to correct header alignment in HTML for Google Table

Utilizing the google visualization table to generate a html table, I have successfully fixed the top section of the html using the stuckpart div. This ensures that regardless of how I scroll, the button remains in place. However, I now aim to fix the table ...

javascriptjqueryhtmlcssgoogle-visualization

Passing Data Between Blazor App Pages Using .NET Core

Recently, I began learning how to create websites using the Blazor template. I'm having trouble figuring out how to pass data from one page to another. It's quite different compared to .NET CORE MVC web applications and I haven't been able t ...

htmlasp.net-coreasp.net-core-2.0blazor

Tips on creating a css selector that targets an element depending on its content

Here is some example HTML code: <tbody> <tr class="cart-item"> <td class="image"> <a href="listing_page/PR1"></a> </td> <th scope="row" class="info"> ... </th> <td class="price"> ...

htmlcss

What is the best way to trigger a JavaScript function to execute as soon as the innerHtml has been modified via Ajax

Utilizing Ajax to dynamically update the content of a div upon clicking a link is my current project. I am seeking guidance on how to call a JavaScript function once the file has been retrieved from the server and the div's content has been replaced. ...

javascripthtmlajax

Ways to obtain the ID of the following element using jQuery

Here is some HTML code, and I am trying to retrieve the ID of the next element from a clicked element with the class name "coba" or to get the ID of an element with the class name "coba2." <div class="dropdown"> <label>Category</label> ...

javascriptjqueryhtml

React Href is not functioning as expected in relative paths

Recently, I delved into React apps and managed to create one with a router. Everything was smooth sailing in dev mode until I tried running index.html from the build folder after npm run build. It seems like all the href links are broken. I suspect somethi ...

javascripthtmlreactjsreact-router

Having trouble loading external CSS in HTML?

I have been attempting to load an external CSS file into my current HTML file without success. I have provided images showcasing the code: View the code here See the output here Currently, I am working on Windows and using Aptana Studio 3 as my IDE. ...

htmlcss

issue encountered while attempting to load a previously saved game

I recently developed a puzzle game and added a save system, but I encountered an error while trying to load the saved data: Check out the website here And this is the saved file Here's the code snippet that is executed when loading the saved data: ...

javascriptjqueryhtml

Is it advisable to use only one base SCSS @use import throughout the entire React application?

Hey there, I've got a question that's been on my mind. I really enjoy using SCSS in React, but for the longest time, I steered clear of variables and mixins because dealing with imports after making changes was a complete nightmare for me (I had ...

cssreactjssass

Pulling Specific HTML Element from External Website with PHP

<?php $info = file_get_contents('http://examplewebsite.com/data'); echo $info; ?> I am trying to extract specific information from a remote website using PHP, focusing only on certain tags. While I have found a script that allows me t ...

phphtmlhtml-parsing

Bottom of the page: Bootstrap dilemma

After designing two footers, I decided to use CSS with the code position: absolute for the second footer. However, this change caused issues with the functionality of the first footer. The display now appears as follows: ...

htmlcssbootstrap-4

The SimpleHTTPServer is causing Google Maps Places Autocomplete feature to malfunction

Currently, I am implementing a location search feature along with form auto-fill using the google.maps.places.Autocomplete functionality. While accessing the HTML file directly (file:///location.html), everything is functioning as expected. However, when ...

javascriptpythonhtmlgoogle-mapsgoogle-maps-api-3