Log in Sign up

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;

3 years ago, 2 replies   Edit question

Does this JSFiddle might show you what you're after?

Answered 3 years ago · Edit answer

😍

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