CODEWITHSUNDEEP
htmlcss
myTest532 myTest532
myTest532 myTest532

Reputation: 2381

Insert a div inside an anchor removing the anchor styling in the div elements

I'm trying to make the whole div clickable, but removing any styling that the anchor adds to the div. I cannot use JS for this.

HTML code

<a href="https://stackoverflow.com" target="_blank">
  <div class="style1">
    <div class="style2">
      <div class="style3_">
        <div>
          <div class="text1">
            Here is the Text 1
          </div>
          <span class="text2">
            Here is the text 2
          </span>
        </div>
        <a href="https://stackoverflow.com" target="_blank">
          Link
        </a>   
      </div>
   </div>
  </div>
</a>

CSS code:

.style1 {
  padding: 16px;
}

.style2 {
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #dadce0;
  box-shadow: none
}

.style3 {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
}

.text1 {
  line-height: 1.5rem;
  font-size: 1rem;
  letter-spacing: .00625rem;
  font-weight: 500;
}

.text2 {
  line-height: 1rem;
  font-size: .75rem;
  letter-spacing: .025rem;
  font-weight: 400;
}

Upvotes: 0

Views: 44

Answers (1)

Yong
Yong

Reputation: 1685

a tags usually adds an underline to indicate that it is a link, that's actually just a text decoration, to remove that you can add text-decoration: none; to whatever class you want the style to be removed, or you can add that to the anchor tag directly. See the snippet below for your reference:

.style3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #dadce0;
  box-shadow: none;
  padding: 16px;
  width: max-content;
  gap: 2rem;
}

.text1 {
  line-height: 1.5rem;
  font-size: 1rem;
  letter-spacing: .00625rem;
  font-weight: 500;
}

.text2 {
  line-height: 1rem;
  font-size: .75rem;
  letter-spacing: .025rem;
  font-weight: 400;
}

a{
  text-decoration: none;
  color: black;
  flex: 1;
  height: 100%;
}
<a href="https://stackoverflow.com" target="_blank">
  <div class="style3">
    <div>
      <div class="text1">
        Here is the Text 1
      </div>
      <span class="text2">
        Here is the text 2
      </span>
    </div>
    <div>
      Link
    </div>
  </div>
</a>

Upvotes: 1

Related Questions