CSS for blockquote border?
CSS friends, I've been playing around with adding a gradient for things like link underlining; it looks like this:
a {
color: {{text_color}};
text-decoration: none;
background: linear-gradient(to left, #ad1981, #46adf9 100%);
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: repeat-x;
}
I'm trying to figure out how to achieve a similar effect as a 2px left hand border for blockquotes, but I'm misunderstanding something about how it works. Any insight much appreciated. My best guess so far looks like this:
padding: 0 0 0 12px;
opacity: 0.8;
background: linear-gradient(to left, #ad1981, #46adf9 100%);
background-position: left;
background-size: 100% 2px;
background-repeat: repeat-y;
😍
Thanks so much kind stranger, that's exactly what I was hoping to achieve. (And... I was kinda close?)
Answered 3 years ago · Edit answer